<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="utf-8">
    <title>商品分类</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/toastr/toastr.min.css"/>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/shop/css/shopClass.css"/>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/toastr/toastr.min.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js" type="text/javascript"
            charset="utf-8"></script>
</head>
<body>
<form role="form" class="form-inline">
    <div class="form-group" style="margin-left: 25px;">
        <label>类别编号</label>
        <input type="text" id="cageId" class="form-control"/>
    </div>
    <div class="form-group">
        <label>类别名称</label>
        <input type="text" id="cageName" class="form-control"/>
    </div>
    <button type="button" onclick="findPage(1,pageBean.pageSize)" class="btn btn-primary btn-sm">搜索</button>
    <button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#myModal2">新增类别</button>

</form>

<table class="table table-bordered text-center table-responsive table-striped table-hover">

    <thead class="text-center">
    <tr>
        <th>类别编号</th>
        <th>类别名称</th>
        <th>备注</th>
        <th>类别状态</th>
        <th>操作</th>
    </tr>
    </thead>

    <tbody id="tb"></tbody>
</table>


<div class="row" id="navBar">
    显示第<span id="start"></span>到第<span id="end"></span>条，总共<span id="sum"></span>条记录，每页显示
    <div class="btn-group dropup">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span id="count"></span>&nbsp;&nbsp;<span
                class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="javascript:findPage(1,5)">5</a></li>
            <li><a href="javascript:findPage(1,10)">10</a></li>
            <li><a href="javascript:findPage(1,50)">50</a></li>
            <li><a href="javascript:findPage(1,100)">100</a></li>
        </ul>
    </div>
    条记录
    <div class="pull-right">
        <nav aria-label="Page navigation">
            <ul id="ctn" class="pagination"></ul>
        </nav>
    </div>
</div>


<!-- 修改商品类别模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">修改商品类别信息</h4>
            </div>
            <form method="post" id="formModify">
                <div class="modal-body">
                    <div class="verification">
                        <div class="input-group">
                            <span class="input-group-addon">类别名称</span>
                            <input name="id" hidden>
                            <input type="text" name="name" class="form-control" placeholder="类别名称"/>
                            <span class="glyphicon" aria-hidden="true"></span>
                        </div>
                    </div>
                    <!-- 输入框间隔 -->
                    <div style="height: 20px;"></div>
                    <!-- 输入框间隔 -->
                    <div class="verification">
                        <div class="input-group">
                            <span class="input-group-addon">状态</span>
                            <select name="status" class="form-control">
                                <option value="0">禁用</option>
                                <option value="1">启用</option>
                            </select>
                            <span class="glyphicon" aria-hidden="true"></span>
                        </div>
                    </div>
                    <!-- 输入框间隔 -->
                    <div style="height: 20px;"></div>
                    <!-- 输入框间隔 -->
                    <div class="verification">
                        <div class="input-group">
                            <span class="input-group-addon">备注</span>
                            <textarea name="momo" class="form-control" placeholder="类别备注内容"></textarea>
                            <span class="glyphicon" aria-hidden="true"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="confirm" class="btn btn-primary">确认</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 修改商品类别模态框 -->

<!-- 新增商品类别模态框 -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">新增商品类别信息</h4>
            </div>
            <form id="add" method="post">
                <div class="modal-body">
                    <div class="verification">
                        <div class="input-group">
                            <span class="input-group-addon">类别名称</span>
                            <input type="text" name="name" class="form-control" placeholder="类别名称"/>
                            <span class="glyphicon" aria-hidden="true"></span>
                        </div>
                    </div>
                    <!-- 输入框间隔 -->
                    <div style="height: 20px;"></div>
                    <!-- 输入框间隔 -->
                    <div class="verification">
                        <div class="input-group">
                            <span class="input-group-addon">状态</span>
                            <select name="status" class="form-control">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </select>
                            <span class="glyphicon" aria-hidden="true"></span>
                        </div>
                    </div>
                    <!-- 输入框间隔 -->
                    <div style="height: 20px;"></div>
                    <!-- 输入框间隔 -->
                    <div class="verification">
                        <div class="input-group">
                            <span class="input-group-addon">备注</span>
                            <textarea name="momo" class="form-control" placeholder="类别备注内容"></textarea>
                            <span class="glyphicon" aria-hidden="true"></span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="addBtn" class="btn btn-primary">确认</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 新增商品类别模态框 -->

<script src="${pageContext.request.contextPath}/shop/js/shopClass.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
